<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid"%>
<rapid:override name="frame-header-style">

	<!-- <link rel="stylesheet" href="resources/kindeditor/themes/default/default.css" /> -->
	<link rel="stylesheet" href="resources/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="resources/kindeditor/kindeditor-all-min.js"></script>
	<script charset="utf-8" src="resources/kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="resources/kindeditor/plugins/code/prettify.js"></script>
</rapid:override>
<rapid:override name="frame-content">
	<blockquote class="layui-elem-quote">
		<span class="layui-breadcrumb" lay-separator="/"> 
			<a href="article">首页</a> <a href="article">文章列表</a> <a><cite>编辑文章</cite></a>
		</span>
	</blockquote>

	<form class="layui-form" method="post" id="myForm" action="article/edit">
		<input type="hidden" name="articleId" value="${article.articleId }">
		<div class="layui-form-item">
			<label class="layui-form-label">标题 <span style="color: #FF5722;" >*</span></label>	
			<div class="layui-input-block">
				<input type="text" name="articleTitle" lay-verify="title" id="title"
					autocomplete="off" placeholder="请输入标题" class="layui-input" value="${article.articleTitle }" >
			</div>
		</div>

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">内容 <span style="color: #FF5722;">*</span></label>		
			<div class="layui-input-block" >
				<textarea name="articleContent" id="content">${article.articleContent }</textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">分类 <span
				style="color: #FF5722;">*</span>
			</label>
			<div class="layui-input-inline">
				    <select name="articleParentCategoryId" id="articleParentCategoryId" lay-filter="articleParentCategoryId" required>
                 
                    <option value="" >一级分类</option>
	                    <c:forEach items="${categoryList}" var="c">
	                        <c:if test="${c.categoryPid==0}">
                        		<option value="${c.categoryId}"
                        			<c:if test="${c.categoryId==bigCate.categoryId}">selected</c:if>
                        		>${c.categoryName}</option>
                            </c:if>
	                    </c:forEach>
                    </select>
			</div>
			<div class="layui-input-inline">
				<select name="articleChildCategoryId" id="articleChildCategoryId">
					<option value="" selected id="smallCatgory">二级分类</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item" pane="">
			<label class="layui-form-label">标签</label>
			<div class="layui-input-block">
			    <c:forEach var="t" items="${tagList}" >
                    <input type="checkbox" name="articleTagIds" lay-skin="primary" title="${t.tagName}" value="${t.tagId}" id="${t.tagId}">
                </c:forEach>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" name="articleStatus" value="1" title="发布" id="1_fc">
				<input type="radio" name="articleStatus" value="0" title="草稿" id="0_fc">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="demo1" >立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary"
					onclick="getCateIds()">重置</button>
			</div>
		</div>
		<blockquote class="layui-elem-quote layui-quote-nm">
			温馨提示：<br> 1、文章内容的数据表字段类型为MEDIUMTEXT,每篇文章内容请不要超过500万字 <br>
			2、写文章之前，请确保标签和分类存在，否则可以先新建；请勿刷新页面，博客不会自动保存 <br> 3、插入代码前，可以点击 <a
				href="javascript:void(0)" target="_blank">代码高亮</a>,将代码转成HTML格式
		</blockquote>
	</form>
</rapid:override>

<rapid:override name="frame-footer-script">
	<script type="text/javascript">
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[id="content"]', {   //指向了页面中 id=content 的那个元素 
				uploadJson : 'article/uploadImg',  //这里改成我们自已的服务端地址
				allowFileManager : true,
				width:"1000px",
				height:"420px"
			});
			prettyPrint();
		$("#ss").click(function(){
			var a = editor1.html();
			if(a==""){
				alert("文本不能为空");
				return false;
			}
		});
		});
        
	</script>
    <script>
        layui.use(['form', 'layedit', 'laydate','jquery'], function() {
            var form = layui.form
                , layer = layui.layer
                , laydate = layui.laydate
                , $=layui.$;

            
            
            //发布和草稿回显
            var fc = '${article.articleStatus}';
            $("#" + fc + "_fc").attr("checked","checked");
          
            
            
            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                }
            });
            //刚回到这个页面时候的回显 layui对会显示后得c:if判断不会触发select监听事件 所以才这样写
            var aa="${bigCate.categoryId}";
            var sm = "${smallCate.categoryId}";
			$.ajax({
				url:"article/lianDong",
				dataType:"json",
				type:"post",
				data:{id:aa},
				success:function(category){
					$.each(category,function(index,item){
						var str="<option value="+item.categoryId;
						if(item.categoryId==sm){
							str+=" selected";
						}
						str +=">"+item.categoryName+"</option>" ;
					    $('#articleChildCategoryId').append(str);//往下拉菜单里添加元素
					 });
					 form.render();
				}
			});
            //二级联动,将来要重写
         	 form.on("select(articleParentCategoryId)",function() {
					$("#articleChildCategoryId").empty();
					$("#articleChildCategoryId").append("<option value=''>请选择二级分类</option>");
					var parentCateId=$("#articleParentCategoryId").val();
					$.ajax({
						url:"category/listsub",
						type:"post",
						dataType:"json",
						data:{parentCateId:parentCateId},
						async:false,
						cache:false,
						success:function(cateList){
							for(var i=0;i<cateList.length;i++){
								var c=cateList[i];
								
								var option="<option value='"+c.categoryId+"'>"+c.categoryName+"</option>"
								$("#articleChildCategoryId").append(option);
							}
							
						}
					})
					form.render('select'); //这个很重要
				});
            form.on("submit(demo1)",function(){
            	var flag = true;
            	var big = $("#articleParentCategoryId").val();
            	var small = $("#articleChildCategoryId").val();
            	if(big==""||small==""){
            		flag = false;
            	}
            	if(!flag){
            		alert("分类为必选项");
            		return flag;
            	}
            });
           //做标签回显
            var tagStr = '${tagStr}';
			if(tagStr!=""){
				var tagStrArray = tagStr.split(",");
				for(var i=0; i<tagStrArray.length-1;i++){
					$("#"+tagStrArray[i]).attr("checked","checked");
				}
			}
       });

    </script>

</rapid:override>

<%@ include file="../framework.jsp" %>